<template>
  <div class="register-page">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="logo">
        <span class="logo-text">快递面单录入系统</span>
      </div>
    </nav>
    
    <!-- 主内容区域 -->
    <div class="main-content">
      <div class="container">
        <div class="header">
          <h1>注册账号</h1>
          <p>创建新的用户账户</p>
        </div>
        
        <div class="form-container">
          <div v-if="successMessage" class="success-message" style="display: block;">
            {{ successMessage }}
          </div>
          <div v-if="errorMessage" class="error-message" style="display: block;">
            {{ errorMessage }}
          </div>
          
          <div class="form-group">
            <label for="username">用户名</label>
            <input 
              type="text" 
              id="username" 
              v-model="formData.username" 
              placeholder="请输入用户名"
              @input="clearError('username')"
            >
            <div v-if="errors.username" class="error-message">
              {{ errors.username }}
            </div>
          </div>
          
          <div class="form-group">
            <label for="email">电子邮箱</label>
            <input 
              type="email" 
              id="email" 
              v-model="formData.email" 
              placeholder="请输入电子邮箱"
              @input="clearError('email')"
            >
            <div v-if="errors.email" class="error-message">
              {{ errors.email }}
            </div>
          </div>
  
          <div class="form-group">
            <label for="password">密码</label>
            <input 
              type="password" 
              id="password" 
              v-model="formData.password" 
              placeholder="请输入密码"
              @input="clearError('password')"
            >
            <div v-if="errors.password" class="error-message">
              {{ errors.password }}
            </div>
          </div>
          
          <div class="form-group">
            <label for="confirmPassword">确认密码</label>
            <input 
              type="password" 
              id="confirmPassword" 
              v-model="formData.confirmPassword" 
              placeholder="请再次输入密码"
              @input="clearError('confirmPassword')"
            >
            <div v-if="errors.confirmPassword" class="error-message">
              {{ errors.confirmPassword }}
            </div>
          </div>
          
          <div class="button-group">
            <button class="register-btn" @click="handleRegister" :disabled="loading">
              {{ loading ? '注册中...' : '注册' }}
            </button>
            <button class="login-btn" @click="goToLogin">
              返回登录
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <div class="footer">
      <p>2025 ©523300264225徐烨</p>
      <p>J2EE程序设计-快递面单录入系统</p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { authAPI } from '../api'

const router = useRouter()
const formData = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
})
const errors = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
})
const errorMessage = ref('')
const successMessage = ref('')
const loading = ref(false)

const validateForm = () => {
  let isValid = true
  
  // 清空错误
  Object.keys(errors).forEach(key => errors[key] = '')
  errorMessage.value = ''
  
  // 验证用户名
  if (!formData.username.trim()) {
    errors.username = '用户名不能为空'
    isValid = false
  } else if (formData.username.trim().length < 3) {
    errors.username = '用户名至少3个字符'
    isValid = false
  }
  
  // 验证邮箱
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailPattern.test(formData.email.trim())) {
    errors.email = '请输入有效的电子邮箱'
    isValid = false
  }
  
  // 验证密码
  if (formData.password.length < 6) {
    errors.password = '密码至少需要6位字符'
    isValid = false
  }
  
  // 验证确认密码
  if (formData.password !== formData.confirmPassword) {
    errors.confirmPassword = '两次输入的密码不一致'
    isValid = false
  }
  
  return isValid
}

const clearError = (field) => {
  errors[field] = ''
  errorMessage.value = ''
}

const handleRegister = async () => {
  if (!validateForm()) {
    return
  }
  
  loading.value = true
  successMessage.value = ''
  errorMessage.value = ''
  
  try {
    const response = await authAPI.register({
      username: formData.username.trim(),
      email: formData.email.trim(),
      password: formData.password
    })
    
    if (response.success) {
      successMessage.value = '注册成功，正在跳转到登录页面...'
      setTimeout(() => {
        router.push('/login')
      }, 2000)
    } else {
      errorMessage.value = response.message || '注册失败，请稍后重试'
    }
  } catch (error) {
    errorMessage.value = error.response?.data?.message || '注册失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.register-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background: linear-gradient(to right, #ffffff);
  color: #333;
  text-align: center;
  padding: 30px 20px;
}

.header h1 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
}

.header p {
  font-size: 16px;
  opacity: 0.9;
}
</style>

